<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JS基础</title>
	</head>
	<body>
		<input type="text" /> +
		<input type="text" /> =
		<input type="text" />
		<input type="button" value="计算"/>
		<!--
			HTML的组成部分
			1, 结构(HTML)
			2, 样式(CSS)
			3, 行为(JaveScript)
			
			JavaScript, 一种脚本语言, 属于编程语言, 负责网页的相关行为和操作
			
			什么是脚本语言?
			
			C语言
			书写->预编译->编译->链接->可执行的二进制文件
			
			JavaScript 脚本语言省去了传统编程语言繁琐的过程, 使用JS写出的代码, 直接编译成就是可执行的文件;
			
			什么是编程语言;
			标准: 具备 "图灵完备" 的计算机语言
			图灵完备: 任何可执行的计算机都可以被计算;
			
			Java 与 JavaScript 没有关系
			ECMAScript ES6
			
			JavaScript 的组成部分
				1, ECMAScript的基础语法
				2, DOM: document object model
				3, BOM: browser object model 浏览器对象默认
				
			JavaScript 语言的特点:
			1, 解释性执行, 脚本语言
			2, 面向对象, 一切事物皆对象
			3, 弱类型, 没有严格的数据类型(var 变量-可以有很多数据类型值)
			4, 事件驱动 JS 是一门以事件触发而驱动执行的语言;
			5, 跨平台
		-->
		
		<!--
			基本语法:
			一, 如何导入 JS
				a. 内联js 把所有的 js 代码写到<script>标签里</script>
				b. 外联js 新建一个 js 文件书写 js 代码
				
			二, JS 的输出方式
				1, alert(内容) 显示一个带有确定按钮和指定内容的警告框
				2, console.log(内容)  在控制台输出内容, 多用于做代码调试;
				3, document.write(内容) 向文档里写内容, 内容会依次拼接;
				4, 元素.innerHTML 改变某个标签里的内容
				5, 操作(设置, 获取)元素的 sytle 样式 元素.style
				6, 操作(设置, 获取)元素的 CSS 样式
				
			三, 常量和变量
				
				常量: 在程序运行期间, 值不可以被修改的量
				
					a. 数字常量
						10. -5, 0.3 等;
					b. 字符串常量
						"100", "哈喽"
				变量: 在程序运行期间, 存储的值可以修改的量, 如果要使用变量, 需要事先声明(创建).
				语法: var 变量名 = 初始值;
				
				变量一旦被声明之后, 就可以使用该变量, 该变量的变量名就可以表示该变量;
				
			 	JS的变量在声明时不会指定对应的数据类型, 统一用 var 表示;
			 	最终变量的数据类型取决于当前变量里存储的值的数据类型;
			 	number, string, boolean, null, underfined, object; 共计 6 种数据类型;
			 	其中 boolean 值多用于只有两种情况的逻辑判断;
			 	
			 	
			 五, 运算符
			 	a, 算数运算符(+, -, *, /, %, ++, --);
			 	
			 	b, 赋值运算符(=, +=, -=, *=, /=, %=);
			 	
			 	c, 关系运算符(>, <, >=, <=, ==, ===, !=, !==);
			 		
		 		d, 逻辑运算符(&&, ||, !)
			 	
			 	
		-->
			
		
		<script type="text/javascript">
			var name = "马'啸'天";
			// 我们在操作变量时, 操作的都是变量里存储的数据;
			
			a = name;
			b = 5;
			c = true;
			console.log(name, a, b);
			console.log(false);
			// 在JS里, 如果一个变量值声明却不赋值, 值为 undifined;
			
			/*
			 * 如何获取元素的数据类型
			 * 使用typeof关键字获取变量的数据类型
			 */
			console.log(typeof a);
			console.log(typeof c);
			a = undefined;
			console.log(typeof a);
			a = {};
			console.log(typeof a);
			a = [];
			console.log(typeof a);
			a = null; // 打印出来的数据类型是 object;
			console.log(typeof a);
			
			
			// null 和 undefined 有什么区别 ?
			
			/*
			 * 数据类型之间的相互转化
			 * 1, 数字和字符串的相互转化
			 * 2, 其他类型转布尔
			 */
			
			// 显示转化
			
			/*
			 * 字符串转数字
			 * 
			 * 1, 如果一个字符串无法转换成数字, 会得到值 NaN , 表示一个不与任何数字相等的数字,但是其数据类型还是number;
			 */
			
			var num1 = Number("abc");
			console.log(num1);
			
			/*
			 * 数字转字符串
			 */
			var num1 = String(123);
			console.log(num1);
			
			/*
			 * 其他类型转布尔
			 * 
			 * 1, 数字范围内, 非 0 即为真
			 * 2, 字符串范围内, 非空字符串都是 true, 空字符串为 false;
			 * 3, null, undefined, NaN 转布尔值都是 false;
			 */
			var num1 = Boolean("");
			console.log(num1);
			var num1 = Boolean(NaN);
			console.log(num1);
			var num1 = Boolean(null);
			console.log(num1);
			var num1 = Boolean(undefined);
			console.log(num1);
			
			// 隐式转化
			
			/*
			 * js 里, 如果一个字符串与一个数字做加法运算, 做的是字符串拼接;
			 */
			var n1 = 100;
			var n2 = "50";
			var sum = n1 + n2;
			console.log(sum);
			
			// 最快将数字转为字符串
			console.log(100 + "")
			

			
			// js 里, 一个字符串与数字做了 除加法 外的其他运算操作, 做的是算数运算;
			var n1 = 100;
			var n2 = "50";
			var sum = n1 / n2;
			console.log(sum);
			
			// 最快将字符串转为数字
			console.log("100" - 0);
			console.log("100" * 1);
			console.log("100" / 1)
			
			
			/*
			 *  ++ 自增运算符
			 *  -- 自减运算符
			 * 
			 * 	++ 和 -- 每次的改变量都为 1;
			 */
			var n = 5;
//			console.log(n++);
//			console.log(++n);
			
			var res = (n++) + (++n) + (++n) + (n++);
			console.log(res);
			
			/*
			 *  运算符在前, 先进行自加(自减)运算, 然后执行其余的操作;
			 * 
			 *  运算符在后, 先执行其余的操作, 再进行自加(自减)运算;
			 */
			
			
			//逻辑运算符(&&, ||, !)
			
			var x = 5;
			var y = 10;
			var test = "" && x - 3;
			console.log(test);
			
			var x = 10;
			var y = 20;
			var z = 30;
			var res = x < y || ++z;
			console.log(res, z);
			/*
			 * 逻辑与和逻辑或的短路现象
			 * 如果系统通过第一个式子已经可以判断出整个式子的结果, name系统不会再执行第二个式子;
			 */
			
	
			
			var inpuT = document.querySelectorAll("input");
			inpuT[3].onclick = function () {
				return inpuT[2].value = inpuT[0].value / 1 % inpuT[1].value / 1
			}
			
			
			
			
			

		</script>
		<!--<script src="first_js.js" type="text/javascript" charset="utf-8"></script>-->
	</body>
</html>
